<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>友情链接</span>
        <!-- <el-button type="primary" style="margin-left: 20px">默认模版</el-button> -->
      </div>
    </template>
    <!--   v-hasPermi="['showManage:addLink:add']" -->
    <div style="text-align: right">
      <el-button type="primary" @click="add">添加</el-button>
    </div>
    <el-table :data="tableData" class="mt20" style="height: 100%">
      <el-table-column label="排序" prop="sort" width="100px">
        <template #default="scope">
          <el-popover
            v-model:visible="scope.row.sortVisible"
            placement="top"
            trigger="click"
            :width="160"
            :popper-style="{ width: '175px' }"
          >
            <el-input-number v-model="scope.row.sort" :min="1" />
            <div class="sort" @click="sort(scope.row)">确定</div>
            <template #reference>
              <span style="cursor: pointer">{{ scope.row.sort || 0 }}</span>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="链接名称" />
      <el-table-column prop="domain" label="链接地址" />
      <el-table-column prop="address" label="操作" width="150">
        <template #default="scope">
          <el-button size="small" @click="edit(scope.row)">编辑</el-button>
          <el-button size="small" @click="deleteBtn(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup lang="ts">
import { del, list } from '@/api/friendshipLink/index';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import common from '@/modules';
const { sortListApi } = common;
const router = useRouter();
const tableData = ref([]);
let params = ref({
  page: 1,
  pageSize: 1000,
});
const add = () => {
  router.push({ path: '/showManage/addLink' });
};
const edit = (row: any) => {
  router.push({
    path: '/showManage/editLink',
    query: { row: JSON.stringify(row) },
  });
};
const deleteBtn = (row: any) => {
  del({ id: row.id }).then(() => {
    ElMessage({
      message: '删除成功',
      type: 'success',
    });
    tableDataList();
  });
};

const sort = async (row: any) => {
  const res = await sortListApi({
    id: row.id,
    sort: row.sort,
    type: 'friendLink',
  });
  tableDataList();
  ElMessage.success(res.msg);

  // 隐藏排序弹出框
  row.sortVisible = false;
};

const tableDataList = () => {
  list(params.value).then((res) => {
    tableData.value = res.data.data;
    if (tableData.value.length) {
      tableData.value.forEach((item: any) => {
        item.sortVisible = false;
      });
    }
  });
};
onMounted(() => {
  tableDataList();
});
</script>
<style lang="scss" scoped>
:deep(.el-form--inline .el-form-item) {
  margin-right: 7px;
}

:deep(.el-form-item--default) {
  margin-bottom: 4px;
}

.sort {
  text-align: left;
  margin: 10px 0 0 0;
  cursor: pointer;
  color: #165dff;
}

.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;

    .headerSize {
      color: #4e5969;
      font-size: 14px;
      margin-left: 12px;
      font-weight: 400;
      height: 20px;
      line-height: 21px;
    }
  }
}
</style>
